import React from 'react'
import CountDown from '../../../components/CountDown';
import './Seckill.less'
import {Swiper} from 'antd-mobile'
import {TruckOutline} from 'antd-mobile-icons'


function Seckill(props) {
  let seckillArr = props.seckillArr;
  return (
    <div className='Seckill'>
      <div className="NewUserModule">
        <div className="head">
          <h3>超级秒杀</h3>
          <CountDown></CountDown>
        </div> 
        <div className="con">
          <div className="left">
            <img src={seckillArr.length>0?seckillArr[0].img:''} alt="" />
          </div>
          <div className="right">
            <h3>{seckillArr.length>0?seckillArr[0].goodsname:''}</h3>
            <div className='mid'>
              <div className="bgOut"><div className="bgIn"></div>30%</div>
              <div className="txt">每人限购1件</div>
            </div>
            <div className="button">
              <img src="/uploads/抢购按钮@3x.png" alt="" />
              <div className="price">
              <span>￥{seckillArr.length>0?seckillArr[0].price:''}</span><del>￥{seckillArr.length>0?seckillArr[0].market_price:''}</del>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="NewUserModule">
          <div className="head">
              <div className="tag">限时秒杀</div>
              <span>新人特价商品专区</span>
              <i>（限量供应，先到先得）</i>
          </div>
          <Swiper
            trackOffset={10}
            slideSize={32}
            style={{
                '--border-radius': '.08rem',
            }}
            defaultIndex={0}
            indicatorProps={{'className':'indicator'}}
            >
            {seckillArr.map((item,index)=>{
          return <Swiper.Item key={index}>
              <div className='goodsCar'>
                <img src={item.img} alt="" />
                <div className="con">
                <div className="price">
                    <i>￥{item.price}</i>
                    <del>￥{item.market_price}</del>
                </div>
                <div className="cart">
                    <TruckOutline style={{'color':'#FF8A80'}}/>
                </div>
                </div>
            </div>
          </Swiper.Item>})}
          </Swiper>
      </div>
    </div>
  )
}

export default React.memo(Seckill);
